<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .clearfix:after{content:'.';display:block;clear:both;height:0;visibility:hidden;overflow:hidden;}
      .clearfix{zoom:1;}
      #box {width: 368px;height:220px;background-color: #00a1cc;overflow-x: hidden;overflow-y: hidden;white-space: nowrap;position: relative;}
      #content img {font-size: 0;float: left;}
      .txt {width: 100%;position: absolute;bottom: 0;left: 0;text-align: center;background-color: rgba(0,0,0,0.5);}
      .active {color: white;}
    </style>
</head>
<body>
<div id="box">
  <div style="width: 500%">
      <div id="content" class="clearfix">
          <img src="image/1.jpg" height="220">
          <img src="image/2.png" height="220">
          <img src="image/3.jpg" height="220">
          <img src="image/4.jpg" height="220">
          <img src="image/5.jpg" height="220">
      </div>
      <div class="txt">
          <a href="#" class="active">1</a>
          <a href="#">2</a>
          <a href="#">3</a>
          <a href="#">4</a>
          <a href="#">5</a>
      </div>
  </div>
</div>

<script>
    var boxObj = document.getElementById('box');
    var contentObj = document.getElementById('content');
    var txtObj = document.getElementsByClassName('txt')[0];
    var imgsObj = contentObj.getElementsByTagName('img');
    var anchorsObj = txtObj.getElementsByTagName('a');
    var contentMarginLeft = parseInt(window.getComputedStyle(contentObj).marginLeft);
    var t,anchorsIndex = 0;
    function move () {
        if(Math.abs(boxObj.scrollWidth-imgsObj[0].clientWidth)<=Math.abs(contentObj.offsetLeft)){
          contentObj.style.marginLeft = 0;
          contentMarginLeft = 0;
        }else{
            contentMarginLeft = contentMarginLeft-imgsObj[0].clientWidth;
            contentObj.style.marginLeft = contentMarginLeft + 'px';
            console.log('aa');
        }
        for (var i = 0,len=anchorsObj.length; i < len; i++) {
                anchorsObj[i].className = '';
              }
        if(anchorsIndex>=anchorsObj.length-1){
          anchorsIndex = 0;
        }else{
          anchorsIndex++;
        }
        anchorsObj[anchorsIndex].className = 'active';
      }
    t = setInterval(move,1000);
</script>
</body>
</html>